<template>
  <div class="modules-blog-content">
    <div class="show-blog clearfix">
      <div class="show-blog-item" @click="clickOrigin">
        <img src="~@/assets/img/blog/javascript.jpg" />
        <div class="cover"></div>
        <div class="text">
          <h1>Javascript起源历史</h1>
          <span class="threeLineDot">十天成就Javascript</span>
        </div>
      </div>
      <div class="show-blog-item" @click="clickPhoto">
        <img src="~@/assets/img/blog/city.jpg" />
        <div class="cover"></div>
        <div class="text">
          <h1>城市</h1>
          <span class="threeLineDot">高楼大厦，钢筋水泥，璀璨灯火，艳丽的绚灿，梦幻般的繁华</span>
        </div>
      </div>
      <div class="show-blog-item" @click="clickPhoto">
        <img src="~@/assets/img/blog/beach.jpg" />
        <div class="cover"></div>
        <div class="text">
          <h1>自由</h1>
          <span class="threeLineDot"
            >不要彷徨，就让我们重拾自由，带上它，踏上洒满阳光的小路。途中，定会风景无限。抬起头，你定会惊喜的发现，这又是一个艳阳天</span
          >
        </div>
      </div>
    </div>
    <!-- <div class="blog-index-img">
      <img src="~@/assets/img/blog/blog-index.webp" alt="" />
    </div> -->
    <div class="line">
      <span class="line-title">最新文章</span>
    </div>
    <div class="new-blog" ref="new-blog" v-loading="loading">
      <BlogItem :list="blogList" />
      <LoadingMore
        v-show="!loading"
        :loadingStatus="loadingStatus"
        :pageSize="pageSize"
        :toLoadHeight="toLoadHeight"
        :ajaxFun="loadingMore"
        :scrollDom="scrollDom"
      />
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getData()
  },
  mounted() {
    //  加载中  以及  没有更多内容  的文字
    this.scrollDom = this.$refs['new-blog']
  },
  data() {
    return {
      loading: false,
      blogList: [],
      loadingStatus: 1,
      // 总页数(这个数随便写的)
      pageSize: 4,
      toLoadHeight: 350,
      scrollDom: '',
      params: {
        page: 1,
        limit: 10
      }
    }
  },
  methods: {
    clickOrigin() {
      this.$router.push({ name: 'blog-details', params: { id: 18 } })
    },
    clickPhoto() {
      this.$message.success('这里只作展示')
    },
    goBlogdetails(id) {
      this.$router.push({ name: 'blog-details', params: { id } })
    },
    getData() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('/article'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.blogList.push(...data.data.list)
            if (this.params.limit >= data.data.total) {
              this.loadingStatus = 3
            }
            this.pageSize = Math.ceil(data.data.total / this.params.limit)
            this.loading = false
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    loadingMore(curPage) {
      if (this.loadingStatus === 3) {
        return
      }
      this.loadingStatus = 2

      this.loadingStatus = this.pageSize > curPage ? 1 : 3
      this.params.page++
      this.getData()
    }
  }
}
</script>

<style lang="scss">
#modules-blog {
  .modules-blog-content {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    .show-blog {
      margin-left: -10px;
      .show-blog-item {
        float: left;
        position: relative;
        width: 50%;
        overflow: hidden;
        border-radius: 5px;
        height: 320px;
        padding-left: 10px;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
          .cover {
            opacity: 1;
          }
        }
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        .cover {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0.5;
          transition: opacity 0.3s;
          border-radius: 5px;
          margin-left: 10px;
          box-sizing: border-box;
          background: rgba(34, 34, 34, 0.5);
        }
        .text {
          position: absolute;
          bottom: 0;
          padding: 10px;
          h1 {
            color: #fff;
            font-size: 1.5rem;
            line-height: 1.5;
            margin: 0;
            letter-spacing: 0.5px;
          }
          span {
            margin-top: 5px;
            line-height: 1.5;
            letter-spacing: 0.3px;
            font-size: 1rem;
            word-wrap: break-word;
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
      & > div:nth-child(2) {
        float: right;
        width: 50%;
        height: 155px;
        box-sizing: border-box;
      }
      & > div:nth-child(3) {
        float: right;
        width: 50%;
        box-sizing: border-box;
        height: 155px;
        margin-top: 10px;
      }
    }

    // .blog-index-img {
    //   img {
    //     height: 200px;
    //     width: 100%;
    //   }
    // }

    // 分割线

    .line {
      position: relative;
      width: 100%;
      height: 1px;
      margin-top: 50px;
      margin-bottom: 20px;
      background: rgb(224, 224, 224);
      .line-title {
        position: absolute;
        top: -9px;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        font-size: 1.5rem;
        font-weight: bold;
        color: #666;
        padding: 0 20px;
      }
    }

    .new-blog {
      min-height: 100px;
    }

    // .new-blog {
    //   min-height: 600px;
    // }
  }
}
</style>
